import React,{Component} from 'react';
import {connect} from 'react-redux'
import { List, Avatar, Icon } from 'antd';
import myavatar from '../../static/images/avatar.jpg'
import {Link} from 'react-router-dom'
class Time extends Component{
    constructor(){
        super();
        this.state={
            
        }
    }
    render(){
        const listData = [];
      for (let i = 0; i < this.props.contentByTimeList.length; i++){
        listData.push({
          href: '/myblog/article/detail/'+this.props.contentByTimeList[i].id,
          title: this.props.contentByTimeList[i].title,
          avatar: myavatar,
          description:
            '分类：'+this.props.contentByTimeList[i].category,
          content:
            this.props.contentByTimeList[i].sketch,
            cate:this.props.contentByTimeList[i].avatar,
            time:this.props.contentByTimeList[i].time,
        });
      }
        return(
            <React.Fragment>
                <List
    itemLayout="vertical"
    size="large"
    pagination={{
      onChange: page => {
        console.log(page);
      },
      pageSize: 6,
    }}
    dataSource={listData}
    footer={
      <div>
        
      </div>
    }
    renderItem={item => (
      <List.Item
        key={item.title}
        actions={[
          <p style={{marginBottom:0}}>{item.time}</p>
        ]}
        extra={
          <img
            width={150}
            alt="logo"
            src={require('../../static/images/'+item.cate+".png")} 
          />
        }
      >
        <List.Item.Meta
          avatar={<Avatar src={require('../../static/images/avatar.jpg')} />}
          title={<Link to={item.href} style={{textDecoration:'none'}}>{item.title}</Link>}
          description={item.description}
        />
        <div dangerouslySetInnerHTML={{__html:item.content}}></div>
      </List.Item>
    )}
  />
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=>{
    return{
       contentByTimeList:state.get('info').get('contentByTimeList').toJS(),
    }
}

const mapDispatchToProps = (dispatch)=>{
    return{
        
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Time);